<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-10-08 20:11:32
 * @心得体会: 无
-->
<template>
    <!-- 表格显示 -->
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @row-dblclick="getInfo">
        <!-- <el-table-column fixed type="selection" width="50" /> -->
        <el-table-column prop="prescriptionId" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="creater" label="医生姓名"  align="center"></el-table-column>
        <el-table-column prop="createTime" label="时间"  align="center"></el-table-column>
        <el-table-column prop="price" label="费用"  align="center"></el-table-column>
        <el-table-column prop="havePay" label="缴费状态"  align="center">
            <template #default="scope">
                <el-tag v-if="scope.row.havePay" type="success"  class="cursor-pointer">已支付</el-tag>
                <el-tag v-else type="primary" class="cursor-pointer" @click="toPay(scope.row)">进行支付</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作"  align="center">
            <template #default="scope">
                <el-button type="primary" @click="getPreInfo(scope.row)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
            <el-switch v-model="background" class="ml-2" />
    </div> -->
    <!-- 弹出对话框 -->
    <el-dialog v-model="dialogVisible" title="支付中...." width="400" :before-close="handleClose">
        <el-form :model="payForm" label-width="auto" class="w-full">
            <el-form-item label="医生姓名">
                <el-text class="w-40">{{ payForm.creater }}</el-text>
            </el-form-item>
            <el-form-item label="时间">
                <el-text class="w-40">{{ payForm.createTime }}</el-text>
            </el-form-item>
            <el-form-item label="费用">
                <el-text class="w-40">{{ payForm.price }}</el-text>
            </el-form-item>
            <el-form-item label="支付方式">
                <el-select
                v-model="payForm.method"
                placeholder="选择支付方式"
                clearable
                class="w-60">
                    <el-option value="0" label="微信支付"></el-option>
                    <el-option value="1" label="支付宝支付"></el-option>
                </el-select>
            </el-form-item>
            这里有一个支付的图片，需要支付模块
            <el-form-item>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="payCome">
                    确定支付
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 弹出详情页 -->
    <el-dialog v-model="preDialogVisible" title="处方详情" width="400">
        <el-table :data="preInfo" style="width: 100%" border height="30vh" highlight-current-row>
            <!-- <el-table-column fixed type="selection" width="50" /> -->
            <el-table-column prop="drugId" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="drugName" label="药品名称"  align="center"></el-table-column>
            <el-table-column prop="price" label="单价"  align="center"></el-table-column>
            <el-table-column prop="drugNumber" label="数量"  align="center"></el-table-column>
        </el-table>
        <div class="mt-2">
            <el-text class="text-xl font-bold">总计：{{ totalPrice }}</el-text>
            <el-button @click="handleInfoClose" class="float-right" type="primary">确定</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getPrescriptionList, getPrescriptionDrugs, payForPrescriptionX } from '@/api/patient/pay.js'
// 表格数据
let tableData = ref([
])
// 详情表
let preInfo = ref([
    {id:1,drugName:"药一",drugPrice:"100",number:"10"},
    {id:2,drugName:"药二",drugPrice:"200",number:"20"},
    {id:3,drugName:"药三",drugPrice:"300",number:"30"},
    {id:4,drugName:"药四",drugPrice:"400",number:"40"}
])
const totalPrice = computed(() => {
  let total = 0
  preInfo.value.forEach(item => {
    total += item.price * item.drugNumber
  })
  return total
})
// 对话框可见
const dialogVisible = ref(false)
const preDialogVisible = ref(false)
// 背景
const background = ref(false)
// 页面
const pageForm = ref({
    currentPage: 1,
    pageSize: 10,
    total: 50
})
const pageSearch = computed(() => {
  return {
    page: pageForm.value.currentPage,
    limit: pageForm.value.pageSize,
  }
})
// 支付表单
const payForm = reactive({
  doctorId: "",
  doctorName: "",
  time: "",
  price: "",
  method: "",
  date: ""
})
initData()
// 初始化方法
function initData(){
    getPrescriptionList().then(res =>{
        if(res.code == 200){
            console.log(res)
            // 初始化表格数据
            tableData.value = res.data
            // pageForm.total = res.data.totalCount
            // pageForm.currentPage = res.data.currPage
            // pageForm.pageSize = res.data.pageSize
        }else if(res.code == 500){
            ElMessage.error(res.msg)
        }
    })
}
// 获取详细信息
function getInfo(row){
    // dialogInfoVisible.value = true 
    console.log(row)
}

const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  initData()
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)
  initData()
}
// 进行支付
const toPay = (row) => {
  console.log("进行支付")
  console.log(row)
  // 设置可见
  dialogVisible.value = true
  payForm.prescriptionId = row.prescriptionId
  payForm.creater = row.creater
  payForm.price = row.price
  payForm.createTime = row.createTime
  payForm.method = "0"
  console.log(payForm)
}


const handleClose = () => {
  ElMessageBox.confirm('你确定取消支付吗？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
        dialogVisible.value = false
        ElMessage({
            type: 'success',
            message: "已取消",
        })
    })
    .catch(() => {
      
    })
}
// 确定预约
const payCome = () => {
  console.log("确认支付")
  const data = {
    prescriptionId: payForm.prescriptionId,
    method: payForm.method
  }
  dialogVisible.value = false
  payForPrescriptionX(data).then(res=>{
    console.log(res)
  })
  ElMessage({
      type: 'success',
      message: "支付成功",
  })
  initData()
}
// 查看详情
const getPreInfo = (row) => {
  console.log(row)
  preDialogVisible.value = true
  getPrescriptionDrugs(row.prescriptionId).then(res =>{
    console.log(res)
    if(res.code == 200){
        preInfo.value = res.data
    }
  })
  
}
// 关闭详情页
const handleInfoClose = () => {
  preDialogVisible.value = false
}

</script>

<style scoped>

</style>